<template>
	<view class="water-admin-page full box relative bg-primary flex-col">
		<view class="top-text">
			<text>使用过程中有任何问题，请联系您的水管家</text>
		</view>
		<view class="w-wrap">
			<view class="w-inner">
				<mescroll-uni @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback">
					<view class="record-list">
						<view class="record-item">
							<view class="device-info">
								<image class="device-img" mode="aspectFill"></image>
								<view class="device-details">
									<view class="d-name">设备名称：W1家庭水站</view>
									<view class="d-id">设备ID：128365</view>
								</view>
							</view>
							<view class="device-footer">
								<text class="admin-name">水管家：杨阳洋</text>
								<text class="admin-phone">13606621664</text>
								<image src="/static/img/phone_icon.png" class="phone-icon" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {

			}
		},
	}
</script>

<style lang="scss" scoped>
	.water-admin-page {
		.record-list {
			padding: 0 32rpx;
			box-sizing: border-box;
			position: relative;

			.record-item {
				padding: 28rpx 18rpx;
				box-sizing: border-box;
				position: relative;
				background: #FFFFFF;
				margin-bottom: 20rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.device-footer {
					margin-top: 24rpx;
					padding-top: 24rpx;
					border-top: 2rpx solid #F1F1F1;
					display: flex;
					align-items: center;

					.phone-icon {
						width: 28rpx;
						height: 28rpx;
						margin-left: 8rpx;
					}

					.admin-phone {
						font-weight: 400;
						font-size: 28rpx;
						color: #3361F0;
						margin-left: auto;
					}

					.admin-name {
						font-weight: 400;
						font-size: 28rpx;
						color: #3361F0;
					}
				}

				.device-info {
					display: flex;
					align-items: center;

					.device-details {
						margin-left: 20rpx;

						.d-name {
							font-size: 30rpx;
							color: #414141;
							line-height: 44rpx;
						}

						.d-id {
							font-size: 24rpx;
							color: #8799BB;
							line-height: 40rpx;
							margin-top: 12rpx;
						}

					}

					.device-img {
						width: 196rpx;
						height: 196rpx;
					}
				}
			}
		}

		.top-text {
			font-weight: 400;
			font-size: 28rpx;
			color: #8799A3;
			line-height: 44rpx;
			text-align: center;
			padding: 26rpx 0;
		}
	}
</style>